import React from 'react';
import { Card, Avatar, Tag } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import './KnowledgeCard.css';

const { Meta } = Card;

const KnowledgeCard = ({ title, content, author, avatar, mainTag, subTag }) => {
  return (
    <Card
      className='knowledge-card'
      title={title}
      bordered={true}>
      <div className='content-wrapper'>
        <div className='content'>{content}</div>
      </div>
      <div className='footer'>
        <div className='author-info'>
          <Avatar
            src={avatar}
            icon={<UserOutlined />}
          />
          <span className='author-name'>{author}</span>
        </div>
        <div className='tags'>
          <Tag
            className='main-tag'
            color='blue'>
            {mainTag}
          </Tag>
          <Tag
            className='sub-tag'
            color='green'>
            {subTag}
          </Tag>
        </div>
      </div>
    </Card>
  );
};

export default KnowledgeCard;
